<template>
  <div class="home">
    <el-container>
      <el-header>
        <div style="display:flex;">
          <img src="../assets/logo.png" alt="">
          <h1 style="margin:10px 0">电商后台管理系统</h1>
        </div>
        <el-button type="info" @click="logOff()">退出登录</el-button>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '60px' : '200px'" style="background-color: #373d41;">
          <el-col>
            <h5 style="color:#fff;text-align:center;" @click="isCollapse = !isCollapse">|||</h5>
            <el-menu :default-active="$route.name" :collapse="isCollapse" class="el-menu-vertical-demo" router
              unique-opened background-color="#373d41" text-color="#fff" active-text-color="#409eff" style="width:100%">
              <el-submenu :index="item.path + ''" v-for="item in menus" :key="item.id">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{ item.authName }}</span>
                </template>
                <el-menu-item-group>

                  <el-menu-item :index="item1.path + ''" v-for="item1 in item.children" :key="item1.id">{{
                    item1.authName
                  }}</el-menu-item>

                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main style="background:#eaedf1">
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:20px">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item >{{ total }}</el-breadcrumb-item>
            <el-breadcrumb-item >{{ total1 }}</el-breadcrumb-item>
          </el-breadcrumb>
          <router-view style="background:#fff;padding: 15px;box-sizing: border-box;"></router-view>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { getMenus } from '../untils/api'
export default {
  data() {
    return {
      isCollapse: false,
      path: '/users',
      menus: [],
      total:'',
      total1:''
    }
  },
  methods: {
    logOff() {
      sessionStorage.removeItem('token')
      this.$router.push('/login')
    },

  },
  name: 'HomeView',
  components: {
    HelloWorld
  },
  created() {
    getMenus().then(res => {
      // console.log(res);
      this.menus = res.data.data
    })
  },
  watch: {
    $route: {
      immediate: true,
      handler(val, oldval) {
        // console.log(val);//新路由信息
        // console.log(oldval);//老路由信息
        // sessionStorage.setItem('path', val)
        this.total = val.meta.title
        this.total1 = val.meta.title1
      },
      // 深度观察监听
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.el-header {
  background-color: #373d41;
  color: #fff;
  display: flex;
  box-sizing: border-box;
  padding: 0 30px;
  justify-content: space-between;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin-right: 30px;
    vertical-align: middle;
  }
}

.el-aside,
.el-main {
  height: calc(100vh - 60px);

}
</style>

